<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  <cpn1></cpn1>-->
<!--  <cpn2></cpn2>-->
  <cpn2></cpn2>
</div>
  <script src="../../../project_practice/lunbotu/vue.js"></script>
  <script>
    //1.创建第一个组件
    const cpnC = Vue.extend({
      template:`
      <div>
      <h2>这是我的第一个组件</h2>
      <p>这是第一组件内容</p>
      </div>
       `
    })

    //2.创建第二个组件
    const cpnC2 = Vue.extend({        //子组件
      template:`
      <div>
      <h2>这是我的第二个组件</h2>
      <p>这是第二组件内容</p>
      <cpn1></cpn1>
       </div>
      `,
      components:{        //局部注册组件，方便直接使用第一个组件
        cpn1:cpnC
      }
    })
    //root组件/根组件
    const app = new Vue({         //父组件
      el:'#app',
      data:{
        message:"你好啊！！"
      },
      // components:{
      //   cpn1:cpnC,
      //   cpn2:cpnC2
      // }
      components:{
        cpn2:cpnC2
      }
    })
  </script>
</body>
</html>